<template>
  <view class="body-view">
    <!-- 使用scroll-view实现tabs滑动切换 -->
    <!-- <view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent"> -->
    <view class="top-menu-view">
      <view class="menu-topic-view" v-for="item in tabs" :categoryId="'tabNum'+item.categoryId"
        :key="(item.categoryId - 1)" @click="swichMenu(item.categoryId - 1)">
        <view :class="currentTab==(item.categoryId - 1) ? 'menu-topic-act' : 'menu-topic'">
          <text class="menu-topic-text">{{item.categoryName}}</text>
          <view class="menu-topic-bottom">
            <view class="menu-topic-bottom-color"></view>
          </view>
        </view>
      </view>
    </view>
    <!-- 内容 -->
    <swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">

      <swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
        <scroll-view scroll-y="true" class="scrol">

          <view class="swiper-item">
            <view class="price">
              <span>
                <image src="../../static/logo2.png" style="height: 150rpx; width: 150rpx;">
                </image>
              </span>
              <span>
                <image src="https://i.hd-r.cn/b6d0bdb3d5e178a6465e0c0a9e88c16e.jpg"
                  style="height: 80rpx; width: 450rpx;margin-bottom: 30rpx;"></image>
              </span>

            </view>

            <view class="content">
              <span class="cankao">
                回收参考价
              </span>
              <br><br>
              <view class="typebox">
                <view class="type">
                  <span>
                    <image @click="showMore1" src="../../static/add.png"
                      style="height: 50rpx;width: 50rpx;vertical-align: middle;"></image>
                  </span>
                  <text>{{item.content1}}</text>
                  <text class="contentPrice">{{item.price1}}/斤</text>

                  <br>
                </view>
                <view class="hiddenInfo" v-if="isShowText1">
                  -选择预估重量（单位：斤）
                  <input type="number" v-model="item.weight1" @input="messageweight1(item)" placeholder="斤"
                    placeholder-class="color:#4a4a4a" />
                  <!-- 回收物状态 -->

                  <radio-group @change="radioChange" class="value checked" style="font-size: 13px;">
                    <label class="radio">
                      <radio style="zoom: 0.8;" :color="roleColor" value="0" :checked="Gstatus1 == '0'" />完好
                    </label>
                    <label class="radio" style="margin-left: 15%;">
                      <radio style="zoom: 0.8;" :color="roleColor" value="1" :checked="Gstatus1 == '1'" />缺损
                    </label>
                  </radio-group>

                  <!-- 确定按钮 -->
                  <button type="primary" plain="true" @tap="messageweight1(item)">确定</button>
                  <view class="chosize boxleftimer">

                    <!-- <view v-for="(item,index) in tagList" :key="index" @click="choseprofrom(index)"  :class="{'selected':flag==index}">
										{{item.kins}}
								</view> -->
                  </view>

                </view>
              </view>

              <view class="type">
                <image @click="showMore2" src="../../static/add.png"
                  style="height: 50rpx;width: 50rpx;vertical-align: middle;"></image>
                <text>{{item.content2}}</text>
                <text class="contentPrice">{{item.price2}}/斤</text>
                <br>
              </view>
              <view class="hiddenInfo" v-if="isShowText2">
                -选择预估重量（单位：斤）
                <input type="number" v-model="item.weight2" @input="messageweight2(item)" placeholder="斤"
                  placeholder-class="color:#4a4a4a" />
                <!-- 回收物状态 -->

                <radio-group @change="radioChange" class="value checked" style="font-size: 13px;">
                  <label class="radio">
                    <radio style="zoom: 0.8;" :color="roleColor" value="0" :checked="Gstatus2 == '0'" />完好
                  </label>
                  <label class="radio" style="margin-left: 15%;">
                    <radio style="zoom: 0.8;" :color="roleColor" value="1" :checked="Gstatus2 == '1'" />缺损
                  </label>
                </radio-group>

                <button type="primary" plain="true" @tap="messageweight2(item)">确定</button>
                <view class="chosize boxleftimer">

                  <!-- <view v-for="(item,index) in tagList" :key="index" @click="choseprofrom(index)"  :class="{'selected':flag==index}">
											{{item.kins}}
									</view> -->
                </view>

              </view>

              <view class="type">
                <image @click="showMore3" src="../../static/add.png"
                  style="height: 50rpx;width: 50rpx;vertical-align: middle;"></image>
                <text>{{item.content3}}</text>
                <text class="contentPrice">￥{{item.price3}}/斤</text>
              </view>
              <view class="hiddenInfo" v-if="isShowText3">
                -选择预估重量（单位：斤）
                <input type="number" v-model="item.weight3" @input="messageweight3(item)" placeholder='斤'
                  class="color:#4a4a4a" />
                <!-- 回收物状态 -->

                <radio-group @change="radioChange" class="value checked" style="font-size: 13px;">
                  <label class="radio">
                    <radio style="zoom: 0.8;" :color="roleColor" value="0" :checked="Gstatus3 == '0'" />完好
                  </label>
                  <label class="radio" style="margin-left: 15%;">
                    <radio style="zoom: 0.8;" :color="roleColor" value="1" :checked="Gstatus3 == '1'" />缺损
                  </label>
                </radio-group>

                <button type="primary" plain="true" @tap="messageweight3(item)">确定</button>
                <view class="chosize boxleftimer">

                  <!-- <view v-for="(item,index) in tagList" :key="index" @click="choseprofrom(index)"  :class="{'selected':flag==index}">
										{{item.kins}}
								</view> -->
                </view>

              </view>
              <view class="tip">
                <image src="../../static/Ntip.png" style="height: 50rpx;width: 50rpx;"></image>
                <text class="title">温馨提示</text>
                <view class="a">
                  <text>参与回收得积分奖励（完整包装：100积分/kg 残损包装：30积分/kg）</text>
                </view>
                <view class="a">

                  <text>有大块污渍或残损的快递包装回收价格与参考价不相同哦~</text>
                </view>
              </view>
              <br>

              <span class="cankao">
                预约时间
              </span>
              <br><br>
              <view class="address">
                回收地址
                <image src="../../static/right.png"
                  style="height: 30rpx;width: 30rpx;padding-left: 480rpx;padding-bottom: 20rpx;"></image>
              </view>
              <br>
              <view class="tip">备注：</view>

              {{item.content}}
            </view>

            <br>


            <view class="shop-foot">
              <label for="" class="radio foot-radio">

              </label>
              <view class="foot-total">
                <view class="foot-count">
                  预计收入：
                  <text class="f-active-color">
                    ￥{{Math.round((item.total1+item.total2+item.total3) * 100) / 100}}
                  </text>
                </view>
                <view class="foot-num" @tap="goCar(item)">
                  加入回收车
                </view>

              </view>

            </view>
          </view>
        </scroll-view>
      </swiper-item>

    </swiper>

  </view>

</template>

<script>
  export default {
    data() {
      return {
        Gstatus1: "",
        Gstatus2: "",
        Gstatus3: "",
        // all:0,
        // weight1:0,
        // weight2:0,
        // weight3:0,
        isShow1: false,
        isClick1: false,
        isShowText1: false,
        isShow2: false,
        isClick2: false,
        isShowText2: false,
        isShow3: false,
        isClick3: false,
        isShowText3: false,
        flag: -1,
        tagList: [{
            kins: "<1斤"
          },
          {
            kins: "1-10斤"
          },
          {
            kins: ">10斤"
          }
        ],

        tabs: [],
        recyclableList: [],
        currentTab: 0,
        tabCurrent: 'tabNum1',
        // Tab切换内容
        swiperDateList: [{
            id: 1,
            content1: '快递箱纸壳',
            price1: 1.2,
            content2: '杂纸',
            price2: 0.8,
            content3: '饮料纸盒',
            price3: 1,
            total1: 0,
            total2: 0,
            total3: 0,
            all: 0,
            weight1: '',
            weight2: '',
            weight3: ''
          },
          {
            id: 2,
            content1: '塑料泡沫',
            content2: '珍珠绵',
            content3: '泡沫盒',
            price1: 1.1,
            price2: 0.7,
            price3: 1.6,
            total1: 0,
            total2: 0,
            total3: 0,
            all: 0,
            weight1: '',
            weight2: '',
            weight3: ''
          },
          {
            id: 3,
            content1: '塑料包装袋',
            content2: '塑料瓶',
            content3: '塑料膜',
            price1: 0.85,
            price2: 1.2,
            price3: 0.6,
            total1: 0,
            total2: 0,
            total3: 0,
            all: 0,
            weight1: '',
            weight2: '',
            weight3: ''
          },
          {
            id: 4,
            content1: '白色编织袋',
            content2: '彩色编织袋',
            content3: '透明编织袋',
            price1: 1.3,
            price2: 0.6,
            price3: 0.9,
            total1: 0,
            total2: 0,
            total3: 0,
            all: 0,
            weight1: '',
            weight2: '',
            weight3: ''
          }
        ],
      }
    },
    onLoad() {
      const that = this
      uni.getSystemInfo({ //获取系统信息
        success: (res) => {
          this.swiperHeight = res.windowHeight + 'px'
        },
        fail: (res) => {
          console.log('error')
        }
      })
      uni.request({
        url: getApp().globalData.baseUrl + "/getRecyclableCategory",
        method: 'GET',
        // data: {
        //   userId: uni.getStorageSync("userId"),
        //   commodityId: i,
        //   quantity: 1,
        // },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          console.log(res)
          that.tabs = res.data
        }
      })
    },

    methods: {
      radioChange(evt) {
        console.log(evt);
        this.Gstatus = evt.detail.value;
        // console.log(this.Gstatus)
      },

      messageweight1(page) {
        let weight1 = page.weight1;
        // console.log(page.id);
        // console.log(page.price1);

        // console.log(weight1 * page.price1);

        page.total1 = (weight1 * page.price1);

        //写完上面定义后就打印一下

        console.log(weight1);

      },
      messageweight2(page) {
        let weight2 = page.weight2;

        page.total2 = (weight2 * page.price2);

        //写完上面定义后就打印一下
        // console.log(weight2);

      },
      messageweight3(page) {
        let weight3 = page.weight3;

        page.total3 = (weight3 * page.price3);
        //写完上面定义()后就打印一下
        // console.log(weight3);

      },
      goCar(page) {
        const that = this
        if (page.weight1 != 0) {
          that.recyclableList.push({
            userId: uni.getStorageSync("userId"),
            recyclableId: 1,
            recyclableWeight: page.weight1,
            recyclableStatus: page.Gstatus1,
          })
        }
        if (page.weight2 != 0) {
          that.recyclableList.push({
            userId: uni.getStorageSync("userId"),
            recyclableId: 2,
            recyclableWeight: page.weight2,
            recyclableStatus: page.Gstatus2,
          })
        }
        if (page.weight3 != 0) {
          that.recyclableList.push({
            userId: uni.getStorageSync("userId"),
            recyclableId: 3,
            recyclableWeight: page.weight3,
            recyclableStatus: page.Gstatus3,
          })
        }

        // uni.switchTab({
        //   url: '/pages/car/car'
        // })
        uni.request({
          url: getApp().globalData.baseUrl + "/insertRecyclableCart",
          method: 'POST',
          data: {
            recyclableList: JSON.stringify(that.recyclableList)

          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          success(res) {
            // console.log(res)
            that.tabs = res.data
            uni.showToast({
              title: '成功',
              icon: 'success',
              duration: 2000
            })
            // 清空数据
            // that.weight1 = ''
            // that.weight2 = ''
            // that.weight3 = ''
          }
        })
      },
      showMore1() {
        this.isShow1 = !this.isShow1
        this.isClick1 = !this.isClick1

        // 先展开500毫秒后再显示文字,收缩200毫秒后再隐藏文字
        if (this.isShowText1) {
          setTimeout(() => {
            this.isShowText1 = !this.isShowText1
          }, 100)
        } else {
          setTimeout(() => {
            this.isShowText1 = !this.isShowText1
          }, 100)
        }

      },
      showMore2() {
        this.isShow2 = !this.isShow2
        this.isClick2 = !this.isClick2

        // 先展开500毫秒后再显示文字,收缩200毫秒后再隐藏文字
        if (this.isShowText2) {
          setTimeout(() => {
            this.isShowText2 = !this.isShowText2
          }, 100)
        } else {
          setTimeout(() => {
            this.isShowText2 = !this.isShowText2
          }, 100)
        }

      },
      showMore3() {
        this.isShow3 = !this.isShow3
        this.isClick3 = !this.isClick3

        // 先展开500毫秒后再显示文字,收缩200毫秒后再隐藏文字
        if (this.isShowText3) {
          setTimeout(() => {
            this.isShowText3 = !this.isShowText3
          }, 100)
        } else {
          setTimeout(() => {
            this.isShowText3 = !this.isShowText3
          }, 100)
        }

      },

      choseprofrom: function(index) {
        if (this.flag == index) {
          this.flag = -1;
        } else
          this.flag = index;
      },
      swichMenu(id) {
        this.currentTab = id
        console.log(11, id)
        this.tabCurrent = 'tabNum' + id
      },
      swiperChange(e) {
        console.log(22, e.detail.current)
        let index = e.detail.current
        this.swichMenu(index)
      }
    }
  }
</script>

<style scoped lang="scss">
  //温馨提示
  .a {
    font-size: 80%;
    margin: 20rpx;
  }

  .title {
    padding-left: 10rpx;
    color: dimgrey;
    font-size: 90%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .hiddenInfo input {
    border: #303133 1px solid;
    width: 100rpx;
    text-align: center;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    margin: 20rpx;

  }

  .hiddenInfo button {
    height: 80rpx;
    width: 130rpx;
    padding: 3rpx;
    border: #43a246 3px solid;
    background-color: #43a246;
    color: white;
    font-weight: 200;
    text-align: center;
    display: inline-block;
    margin-left: 500rpx;
    margin-bottom: 20rpx;
    font-size: 90%;

  }

  .tip {
    background-color: #f5f5f5;
    height: 300rpx;
    padding-left: 20rpx;
    padding-top: 15rpx;
  }

  //回收地址
  .address {
    padding: 20rpx;
    //margin:60rpx 30rpx;
    background-color: #f5f5f5;
    margin: 20rpx;
  }

  //预估重量
  .show-more-click {
    height: 0%;
  }

  .hiddenInfo {
    height: 260rpx;
  }

  .boxleftimer {

    padding: 20rpx;
    margin: 10rpx;
  }

  .boxleftimer view {

    margin: 30rpx;
    display: inline;
    padding: 8rpx;
    border: #757557 1rpx solid;

    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .selected {
    color: white;
    background-color: #43a246;
  }


  // 内容
  .scrol {
    height: 100%;
  }

  .content {
    padding: 20rpx;
    margin: 10rpx;


  }

  .contentPrice {
    color: #6faf84;
    font-weight: bold;
    text-align: right;
  }

  .cankao {
    // text-decoration: underline;
    border-bottom: #bde3dd solid 3px;
    margin-bottom: 30rpx;
    padding: 10rpx;
    margin-top: 30rpx;
  }

  .price {
    background-color: #bbceba;
    width: 100%;
    height: 150rpx;
    border-radius: 5%;
    margin-bottom: 8rpx;
    display: inline-block;
    padding: 10rpx;
  }

  .body-view {
    height: 100vh;
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    align-items: flex-start;
    justify-content: center;
  }

  .top-menu-view {
    display: flex;
    // position: fixed;
    top: 100rpx;
    left: 0;
    white-space: nowrap;
    width: 100%;
    background-color: #FFFFFF;
    height: 0rpx;
    // line-height: rpx;
    border-top: 1rpx none #d8dbe6;

    .menu-topic-view {
      display: inline-block;
      white-space: nowrap;
      height: 86rpx;
      position: relative;

      .menu-topic-text {
        font-size: 30rpx;
        color: #303133;
        padding: 5rpx 60rpx;
      }

      // .menu-topic-act {
      // 	margin-left: 30upx;
      // 	margin-right: 10upx;
      // 	position: relative;
      // 	height: 100%;
      // 	display: flex;
      // 	align-items: center;
      // 	justify-content: center;
      // }

      .menu-topic-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;

        .menu-topic-bottom-color {
          width: 40rpx;
          height: 4rpx;
        }
      }

      .menu-topic-act .menu-topic-bottom {
        display: flex;
        justify-content: center;
      }

      .menu-topic-act .menu-topic-bottom-color {
        background: #43a246;
      }



    }


  }

  //内容样式

  .type {

    background-color: #f5f5f5;
    padding: 30rpx;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10px 10px 10px 10px;


  }

  .type text {

    padding-left: 20rpx;
    margin: 0 auto;
    vertical-align: middle;
  }

  .swiper-box-list {
    width: 100%;
    padding-top: 90rpx;
    flex: 1;
    background-color: #FFFFFF;

    .swiper-topic-list {
      width: 100%;
    }
  }

  .shop-foot {
    border-top: 2rpx solid #f7f7f7;
    background-color: #FFFFFF;
    //position: fixed;
    margin-top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100rpx;
  }

  .foot-radio {
    padding-left: 20rpx;
  }

  .foot-total {
    display: flex;
  }

  .foot-count {
    line-height: 100rpx;
    padding: 0 20rpx;
    font-size: 32rpx;
  }

  .foot-num {
    background-color: #43a246;
    color: #FFFFFF;
    padding: 0 60rpx;
    line-height: 100rpx;
  }
</style>